import './ContentList.scss'
import React from 'react'
import {connect} from 'react-redux'

import {getListDate} from '../actions/contentListAction.js'
import ListItem from './ListItem/ListItem.jsx'
import Loading from '../../../component/Loading/Loading.jsx'
import ScrollView from'../../../component/ScrollView/ScrollView.jsx'
//附近商家列表
class ContentList extends React.Component {
  constructor(prors) {
    super(prors)
    //判断是不是可以滚动
    this.state = {
      isend: false
    }
    //记录当前页码
    this.page = 0
    //请求第一屏幕数据
    
  }
  //滚动加载
  onLoadPage() {
    //可以滚动3次
    if (this.props.page <=3) {
      this.fetchDate()
    }
  }
  UNSAFE_componentWillMount() {
    this.fetchDate()
  }
  
  //调用action
  fetchDate() {
    this.props.dispatch(getListDate({}))
  }
  
  renderItems() {
    let lists = this.props.lists
    return lists.map((item, index) => {
      return (
        <ListItem key={index} itemData={item}></ListItem>
      )
    })
  }
  
  render() {
    return (
      <div className='list-content'>
        <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.props.isend}>
          {this.renderItems()}
          <Loading isend={this.props.isend}/>
        </ScrollView>
      </div>
    )
  }
}

export default connect(
  state => ({
    lists:state.contentListReducer.lists,
    page:state.contentListReducer.page,
    isend:state.contentListReducer.isend
  })
)(ContentList)